<!--<template>-->
<!--  <el-carousel height="720px" :interval="3000" arrow="always">-->
<!--    <el-carousel-item>-->
<!--      <img src="/static/image/alex.jpeg" alt="">-->
<!--    </el-carousel-item>-->
<!--    <el-carousel-item>-->
<!--      <img src="/static/image/banner1.png" alt="">-->
<!--    </el-carousel-item>-->
<!--    <el-carousel-item>-->
<!--      <img src="/static/image/banner1.png" alt="">-->
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->
<!--</template>-->

<!--<script>-->
<!--    export default {-->
<!--        name: "Banner",-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->
<!--  .el-carousel__item h3 {-->
<!--    color: #475669;-->
<!--    font-size: 18px;-->
<!--    opacity: 0.75;-->
<!--    line-height: 300px;-->
<!--    margin: 0;-->
<!--  }-->

<!--  .el-carousel__item:nth-child(2n) {-->
<!--    background-color: #99a9bf;-->
<!--  }-->

<!--  .el-carousel__item:nth-child(2n+1) {-->
<!--    background-color: #d3dce6;-->
<!--  }-->
<!--</style>-->


<template>
  <div class="banner">
    <el-carousel trigger="click" height="506px">
      <el-carousel-item v-for="item in banner_list">
        <a :href="item.link"><img :src="$settings.Host+item.image_url"></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: [],
            };
        },
        created() {
            // 获取轮播图
          this.get_banner_list()

        },
        methods: {
            get_banner_list() {
                this.$axios.get(`${this.$settings.Host}/banner/`).then(response => {
                    console.log(`${this.$settings.Host}/banner/`);
                    console.log(response.data);
                    this.banner_list = response.data
                }).catch(error => {
                    console.log(error.response);
                });
            }
        }
    }
</script>
